<template>
    <el-form :model="formData" label-width="auto" style="max-width: 600px" ref="form1Ref" :rules="rules">
  
        <el-form-item label="名称" prop="name" label-width="80px">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="图片" prop="img" label-width="80px">
          <el-space wrap>
            <Tuku v-model="formData.img1" />
          <Tuku v-model="formData.img2" />
          <Tuku v-model="formData.img3" />
          <Tuku v-model="formData.img4" />
          <Tuku v-model="formData.img5" />
        </el-space>
        </el-form-item>
        <el-form-item label="状态" label-width="80px"> 
          <Enum v-model="formData.status" enumName="WarehouseStatus"></Enum>
        </el-form-item>
        <el-form-item label="排序" label-width="80px">
          <el-input-number :min="0" v-model="formData.seq" />
        </el-form-item>
        <el-form-item label="详情" label-width="80px">
          <Editor v-model="formData.brief" :height="200"></Editor>
        </el-form-item>
        <el-form-item label-width="80px">
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
  </template>
  <script setup lang="ts">
  import Tuku from '@/components/Tuku.vue';
  import Enum from '@/components/Enum.vue';
  import { onMounted, reactive, ref } from 'vue';
  import { warehouseApi } from '@/api';
  import { ElMessage } from 'element-plus';
  import Editor from '@/components/Editor.vue';
  const form1Ref = ref()
  const formData = reactive<any>({
  id: 0,  
  name: '',
  img1: '',
  img2: '',
  img3: '',
  img4: '',
  img5: '',
  status:1,
  seq:1,
  brief: ''
  })
  const submit = () => {
    let imgArray=[]
    for(let i=1;i<=5;i++){
      if(formData['img'+i]!=""){
        imgArray.push(formData['img'+i])
      }
    }
    if(imgArray.length==0){
      ElMessage.error("请上传图片")
      return
    }
    
    let params={
      name: formData.name,
      img: imgArray,
      status:formData.status,
      seq:formData.seq,
      brief: formData.brief
    }
    warehouseApi.add.call(params).then(()=>{
    ElMessage.success("添加成功")
    
  })
  
  }
  onMounted(()=>{
  
  })
  
  
  const rules = {
     name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
    ],
    
  }
  const submitForm = async () => {
  
    await form1Ref.value.validate((valid: any, fields: any) => {
        if (valid) {
            submit()
        }
    })
  }
  const resetForm = () => {
  
  }
  </script>
  